<template>
    <div class="container">
        <el-form ref="form" :model="row" label-width="100px" size="mini">
            <el-row>
                <el-col :span="24">
                    <el-form-item label="指标名称">
                        <el-input v-model="row.quotas_name" disabled></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="24">
                    <el-form-item label="业务说明">
                        <el-input type="textarea" v-model="row.quotas_desc" :autosize="{ minRows: 4, maxRows: 8 }"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">

                <el-col :span="24">
                    <el-form-item label="java方法名" v-if="row.calculation_method == '01'">
                        <el-input v-model="row.achieve_method_name"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row v-if="row.calculation_method == '02'">
                <el-col :span="24">
                    <el-form-item label="实现sql">
                        <div class="codeC">
                            <codemirror v-model="row.achieve_sql" :options="cmOptions" ref="addFormula"></codemirror>
                            <!-- <div class="tabs">
                                <div class="tabs-item">代码</div>
                                <div class="tabs-item" style="background-color:rgba(121, 121, 121, 1);">配置</div>
                            </div> -->
                        </div>
                    </el-form-item>

                </el-col>
            </el-row>
            <el-row v-if="row.calculation_method == '03'">
                <el-col :span="24">
                    <el-form-item label="javascript逻辑表达式">
                        <div class="codeC">
                            <codemirror v-model="row.achieve_js" :options="cmOptions" ref="addFormula"></codemirror>
                            <!-- <div class="tabs">
                                <div class="tabs-item">代码</div>
                                <div class="tabs-item" style="background-color:rgba(121, 121, 121, 1);">配置</div>
                            </div> -->
                        </div>
                    </el-form-item>

                </el-col>
            </el-row>

            <div class="">
                <div class="title" style="margin-bottom:20px;">
                    调试对象配置
                </div>
                <div>
                    <el-form-item label="对象配置">
                        <div class="btnC">
                            <el-button type="danger" size="mini" class="mybtn" @click="delObj()"><i class="el-icon-minus"></i></el-button>
                            <el-button type="danger" size="mini" class="mybtn" @click="abddObj()"><i class="el-icon-plus"></i></el-button>
                        </div>
                        <el-table v-loading="loading" ref="bqEltable" :data="dxTableDatas" style="width: 100%" fit border @selection-change="handleSelectionChange">
                            <el-table-column type="selection" width="63" align="center"> </el-table-column>
                            <el-table-column type="index" label="序号" width="60" align="center" :index="currIndex"> </el-table-column>
                            <el-table-column label="纳税人名称" prop="nsrmc" align="center"></el-table-column>
                            <el-table-column label="社会信用代码" prop="nsrsbh" align="center"></el-table-column>
                        </el-table>
                    </el-form-item>

                </div>
            </div>

            <div class="" style="border-bottom:none;margin:20px 0;">
                <div class="title">
                    调试结果
                </div>

                <div class="result" v-for="(value, key,index) in objData" :key="key" :style="{'margin-top':index>=1?'30px':'0'}">
                    <div class="result-title">
                        <div class="l">
                            <img src="@/assets/images/u5370.png" alt="">
                            <span>{{ key }} </span>

                        </div>
                        <div class="r">
                            共 {{value.filter(item => item.result === "1").length}} 个疑点
                        </div>
                    </div>
                    <div class="result-table">
                        <el-table v-loading="resultLoading" ref="bqEltable" :show-header="false" :data="value" style="width: 100%" fit :border="false">
                            <el-table-column label="指标名称" prop="quotasDesc" align="left">
                                <template slot-scope="scope">
                                    <span :class="[scope.row.result === '1' ? 'textRedColor' : '']">{{ scope.row.quotasDesc }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="疑点" prop="result" align="right">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.result === '1'" class="textRedColor">疑点</span>
                                    <span v-else class="textblueColor">正常</span>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>

            <el-form-item>
                <div style="text-align:center;">
                    <el-button type="primary" @click="onSubmit">调试</el-button>
                    <el-button @click="go('list')">返回</el-button>
                </div>
            </el-form-item>
        </el-form>

        <el-dialog :title="selectFalg=='1'?'监控对象配置':'监控指标配置'" ref="myDialog" :visible.sync="dialogVisible" append-to-body width="800px" top="6vh">
            <div class="fileView" ref="fileView">
                <div class="searchMy" v-if="selectFalg== 1">
                    <el-form :inline="true" size="mini" class="searchMy-form" ref="form" :model="queryObj">
                        <el-form-item label="企业名称">
                            <el-input v-model="queryObj.nsrmc" placeholder="" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="企业类型">
                            <el-select v-model="queryObj.qylx_dm" placeholder="" clearable>
                                <el-option v-for="item in selectoption" :key="item.label" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button size="mini" type="primary" @click="getTableData()">查询</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="searchMy" v-if="selectFalg== 2">
                    <el-form :inline="true" size="mini" class="searchMy-form" ref="form" :model="queryObj">
                        <el-form-item label="指标类型">
                            <el-input v-model="queryObj.nsrmc" placeholder="" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="指标名称">
                            <el-select v-model="queryObj.qylx_dm" placeholder="" clearable>
                                <el-option v-for="item in quotas_typeOption" :key="item.label" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button size="mini" type="primary" @click="getTableData()">查询</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <my-table v-show="selectFalg== 1" v-loading="dialogLoading" ref="myEltable" style="width: 100%" row-key="id" :showsummary="false" :columns="dxtableColumns" :tableData="tableDatas" :pageNum="queryObj.pageNo" :pageSize="queryObj.pageSize" :totalPage="total" max-height="660px" :current="false" @onCurrentChange="changepageNo" @onPageSizeChange="changePageSize" highlight-current-row :ifSelect="true" @onSelectionChange="onSelectionChange" />

                <my-table v-show="selectFalg=='2'" v-loading="dialogLoading" ref="myEltable1" style="width: 100%" row-key="id" :showsummary="false" :columns="zbtableColumns" :tableData="zbtableDatas" :pageNum="queryObj.pageNo" :pageSize="queryObj.pageSize" :totalPage="total" max-height="660px" :current="false" @onCurrentChange="changepageNo" @onPageSizeChange="changePageSize" highlight-current-row :ifSelect="true" @onSelectionChange="onSelectionChange" />
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
                <el-button type="primary" size="mini" @click="confirm(),dialogVisible = false">确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
// require component
import { codemirror } from "vue-codemirror";
import { queryList } from '@/api/cxtj/zdsygl'
// require styles
import "codemirror/lib/codemirror.css";
import "codemirror/theme/material.css"; // 引入控制主题，没有的话主题不起效果
require("codemirror/mode/python/python.js");
require("codemirror/addon/fold/foldcode.js");
require("codemirror/addon/fold/foldgutter.js");
require("codemirror/addon/fold/brace-fold.js");
require("codemirror/addon/fold/xml-fold.js");
require("codemirror/addon/fold/indent-fold.js");
require("codemirror/addon/fold/markdown-fold.js");
require("codemirror/addon/fold/comment-fold.js");

import { queryList as task_queryList, queryQuotasAttribute } from '@/api/tzyy/mxkc'
import { scanTasktest, insert_task } from '@/api/znjk/znjk'
import { isObjEmpty } from '@/utils/utils'
export default {
    components: {
        codemirror,
    },
    props: {
        row: {
            type: Object,
            default: false
        }
    },
    data() {
        return {
            dialogLoading: false,
            loading: false,
            treeloading: false,
            dialogVisible: false,

            selectoption: [
                {
                    value: '11',
                    label: '千户集团'
                }, {
                    value: '2',
                    label: '省局列名'
                }, {
                    value: '3',
                    label: '市局列名'
                }
                // {
                //     value: 1,
                //     label: '省局列名'
                // },
                // {
                //     value: 2,
                //     label: '市局列名'
                // },
                // {
                //     value: 3,
                //     label: '其他类型'
                // }
            ],


            dxTableDatas: [

            ],
            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            doSelect: [],
            cmOptions: {
                tabSize: 4, // 制表符的宽度
                mode: "python", // 使用的模式
                // theme: "material", // 主题黑色
                theme: "darcula", // 主题白色
                lineNumbers: true, // 是否显示行号
                lineWrapping: true, // 是否应滚动或换行以显示长行
                extraKeys: { Ctrl: "autocomplete" },
                lineWiseCopyCut: true, // 在没有选择的情况下进行复制或剪切将复制或剪切有光标的整行。
                showCursorWhenSelecting: true, // 选择处于活动状态时是否应绘制光标
                maxHighlightLength: Infinity, // 显示长行的时候 这个值是不限制，如果要做限制的话，值是number类型
                matchBrackets: true, // 光标匹配括号
                line: true,
                readOnly: false, // 只读
            },
            tableColumns: [
                {
                    label: '企业名称',
                    prop: 'nsrmc',
                    align: 'center',

                },
                {
                    label: '纳税人识别号',
                    prop: 'nsrsbh',
                    align: 'center',
                },
                {
                    label: '企业类型',
                    prop: 'qylx_mc',
                    align: 'center',
                },



            ],
            tableDatas: [],
            selectFalg: '1',
            dialogselectedRows: [],
            total: 0,
            zbbq: [],
            quotas_typeOption: [
                { label: '全部', value: '' },
                {
                    label: '强指标',
                    value: '00',
                },
                {
                    label: '弱指标',
                    value: '01',
                }],
            dialogHeight: '',
            datas: [],
            dxTableDatas: [

            ],


            doSelect: [],
            queryObj: {
                nsrmc: '',
                qylx_dm: '',
                quotas_type: '',
                quotas_name: '',
                pageNo: 1,
                pageSize: 20
            },
            tableColumns: [],
            dxtableColumns: [
                {
                    label: '企业名称',
                    prop: 'nsrmc',
                    align: 'center',

                },
                {
                    label: '纳税人识别号',
                    prop: 'nsrsbh',
                    align: 'center',
                },
                {
                    label: '企业类型',
                    prop: 'qylx_mc',
                    align: 'center',
                },
            ],
            zbtableColumns: [
                {
                    label: '指标类型',
                    prop: 'quotas_type',
                    align: 'center',
                    minWidth: 120,
                    render: (h, params) => {
                        // onClick={() => this.upload(params.row)}
                        if (params.row.quotas_type == '00') {
                            return (
                                <span>
                                    强指标
                                </span>
                            );
                        } else if (params.row.yxbz == '01') {
                            return (
                                <span>
                                    弱指标
                                </span>
                            );
                        }

                    }
                },
                {
                    label: '指标名称',
                    prop: 'quotas_name',
                    align: 'center',
                    minWidth: 120,

                },
                {
                    label: '状态',
                    prop: 'yxbz',
                    align: 'center',
                    minWidth: 60,
                    render: (h, params) => {
                        // onClick={() => this.upload(params.row)}
                        if (params.row.yxbz == 'Y') {
                            return (
                                <span>
                                    有效
                                </span>
                            );
                        } else if (params.row.yxbz == 'N') {
                            return (
                                <span>
                                    无效
                                </span>
                            );
                        }

                    }
                },

                {
                    label: '创建日期',
                    prop: 'create_time',
                    align: 'center',
                    minWidth: 100,

                },
                {
                    label: '创建人',
                    prop: 'create_by',
                    align: 'center',
                    minWidth: 80,

                },
                {
                    label: '业务说明',
                    prop: 'quotas_desc',
                    align: 'center',
                    minWidth: 250,

                },



            ],
            tableDatas: [],
            zbtableDatas: [],
            dialogselectedRows: [],
            total: 0,
            defaultProps: {
                children: 'children',
                label: 'quotas_name',
                value: 'quotas_id'
            },
            treeCheckData: [],
            objData: {},
            resultLoading: false
        }
    },
    mounted() {
        console.log(this.row)

    },
    methods: {
        handleCheckChange(data, checked, indeterminate) {
            let selectArr = []

            for (let i = 0; i < checked.checkedNodes.length; i++) {
                if (checked.checkedNodes[i].disabled != 'disabled') {
                    selectArr.push(checked.checkedNodes[i])
                }
            }
            this.treeCheckData = selectArr
        },
        onSubmit() {
            if (this.dxTableDatas.length <= 0) {
                this.$message.error('请选择对象企业！')
                return false
            }
            let params = {
                quotasInfoList: [this.row],
                taskEnterpriseInfoList: this.dxTableDatas,
                taskInfo: {
                    task_name: '实时扫描',
                    task_desc: '',
                    yxbz: 'N',
                    cron_expression: '* * * * 2099 ?'
                }
            }
            this.resultLoading = true
            insert_task(params).then(res => {
                if (res.code == 200) {
                    scanTasktest({ task_id: res.message }).then(re => {

                        this.resultLoading = false
                        this.objData = re.data
                    })
                }
            })
            console.log('submit!');
        },
        //待处理
        go(name, params) {
            this.$emit('changePage', name, params);
        },
        currIndex(index) {
            return index + 1;
        },
        delObj() {
            if (this.dxTableDatas.length > 0) {
                for (let i = 0; i < this.doSelect.length; i++) {
                    for (let j = 0; j < this.dxTableDatas.length; j++) {
                        if (this.doSelect[i].nsrsbh == this.dxTableDatas[j].nsrsbh) {
                            this.dxTableDatas.splice(j, 1)
                        }
                    }
                }
                this.doSelect = []
            } else {
                this.$message.error('请选择一条数据删除');
                return false;
            }


        },
        abddObj() {
            this.queryObj.pageNo = 1
            this.queryObj.pageSize = 20
            this.selectFalg = '1'
            this.tableColumns = []



            this.getTableData()
            this.dialogVisible = true

        },
        addzb() {
            this.queryObj.pageNo = 1
            this.queryObj.pageSize = 20
            this.selectFalg = '2'
            this.tableColumns = []

            this.getTableData()
            this.dialogVisible = true

        },
        delzb() {
            if (this.datas.length > 0) {

                for (let d = 0; d < this.datas.length; d++) {
                    if (this.datas[d].children.length > 0) {
                        for (let j = 0; j < this.datas[d].children.length; j++) {
                            for (let i = 0; i < this.treeCheckData.length; i++) {
                                if (!this.treeCheckData[i].children) {
                                    console.log(this.treeCheckData[i].quotas_id)
                                    if (this.treeCheckData[i].quotas_id == this.datas[d].children[j].quotas_id) {
                                        this.datas[d].children.splice(j, 1)
                                        console.log(this.treeCheckData[i].quotas_id)
                                        if (this.datas[d].children.length === 0) {
                                            this.datas.splice(d, 1)
                                        }
                                    }
                                }
                            }
                        }
                    }


                }
            } else {
                this.$message.error('请选择一条数据删除');
                return false;
            }



        },
        getTableData() {
            this.dialogselectedRows = []
            this.tableDatas = []
            this.dialogLoading = true
            this.$nextTick(() => {
                this.dialogHeight = this.$refs.fileView.offsetHeight
            })
            if (this.selectFalg === '1') {
                console.log(this.selectFalg)
                this.tableColumns.push(...this.dxtableColumns)
                let params = {
                    nsrmc: this.queryObj.nsrmc,
                    pageNum: this.queryObj.pageNo,
                    pageSize: this.queryObj.pageSize,
                    qylx_dm: this.queryObj.qylx_dm,

                }
                queryList(params).then(res => {
                    this.dialogLoading = false
                    if (res.code == 200) {
                        let dataArr = res.data.records
                        let newArr = []
                        for (let i = 0; i < this.dxTableDatas.length; i++) {
                            for (let j = 0; j < dataArr.length; j++) {

                                if (this.dxTableDatas[i].nsrsbh == dataArr[j].nsrsbh) {
                                    dataArr.splice(j, 1);
                                }
                            }
                        }
                        this.tableDatas = dataArr
                        this.total = res.data.total
                    }
                })
            } else if (this.selectFalg === '2') {
                console.log(this.selectFalg)
                this.tableColumns.push(...this.zbtableColumns)
                console.log(this.tableColumns)
                let params = {
                    quotas_type: this.queryObj.quotas_type,
                    pageNum: this.queryObj.pageNo,
                    pageSize: this.queryObj.pageSize,
                    quotas_name: this.queryObj.quotas_name,
                }
                task_queryList(params).then(res => {
                    this.dialogLoading = false
                    let dataArr = res.data.records
                    let newArr = []
                    for (let k = 0; k < this.datas.length; k++) {
                        newArr.push(...this.datas[k].children)
                    }


                    for (let i = 0; i < newArr.length; i++) {
                        console.log('newArr', newArr[i])
                        for (let j = 0; j < dataArr.length; j++) {
                            console.log('dataArr', dataArr[j])

                            if (dataArr[j]) {
                                if (newArr[i].quotas_id == dataArr[j].quotas_id) {
                                    dataArr.splice(j, 1);
                                }
                            }
                        }
                    }
                    this.zbtableDatas = dataArr
                     this.total = res.data.total
                })
            }

        },

        confirm() {
            if (this.selectFalg === '1') {
                this.dxTableDatas.push(...this.dialogselectedRows)
            } else if (this.selectFalg === '2') {
                //  datas
                let zbType = []
                for (let j = 0; j < this.zbbq.length; j++) {
                    zbType[j] = {
                        quotas_name: '',
                        quotas_id: '',
                        children: []
                    }
                    for (let i = 0; i < this.dialogselectedRows.length; i++) {
                        if (this.datas.length > 0) {
                            for (let z = 0; z < this.datas.length; z++) {
                                if (this.zbbq[j].attribute_code == this.datas[z].quotas_id) {
                                    if (this.dialogselectedRows[i].quotas_attribute == this.zbbq[j].attribute_code) {
                                        this.datas[z].children.push(this.dialogselectedRows[i])
                                    }
                                } else {
                                    if (this.dialogselectedRows[i].quotas_attribute == this.zbbq[j].attribute_code) {
                                        zbType[j].quotas_name = this.zbbq[j].attribute_name
                                        zbType[j].quotas_id = this.zbbq[j].attribute_code
                                        zbType[j].children.push(this.dialogselectedRows[i])
                                    }
                                }
                            }
                        } else {
                            if (this.dialogselectedRows[i].quotas_attribute == this.zbbq[j].attribute_code) {
                                zbType[j].quotas_name = this.zbbq[j].attribute_name
                                zbType[j].quotas_id = this.zbbq[j].attribute_code
                                zbType[j].children.push(this.dialogselectedRows[i])
                            }
                        }



                    }
                }
                for (let k = 0; k < zbType.length; k++) {
                    if (zbType[k].children.length > 0) {

                        this.datas.push(zbType[k])
                    }
                }
            }
            this.total = this.total - this.dialogselectedRows.length
            this.dialogselectedRows = []
            this.dialogVisible = false


        },
        getQueryQuotasAttribute() {

            queryQuotasAttribute().then(res => {
                if (res.code == 200) {
                    this.zbbq = res.data






                }
            })
        },  //获取指标类型
        // confirm() {
        //     this.dxTableDatas.push(...this.dialogselectedRows)
        //     this.total = this.total - this.dialogselectedRows.length

        //     this.dialogVisible = false


        // },
        changepageNo(currPage) {
            this.queryObj.pageNo = currPage;
            this.getTableData();
        },
        changePageSize(pageSize) {
            this.queryObj.pageSize = pageSize;
            this.getTableData();
        },
        // 表格 多选 事件
        onSelectionChange(selectedRows) {
            this.dialogselectedRows = selectedRows;
            console.log(this.dialogselectedRows)
        },
        handleselectAll(selectedRows) {
            this.dialogselectedRows = selectedRows;
        },

        // 附件表格 多选 事件
        handleSelectionChange(selectedRows) {
            this.doSelect = selectedRows;
            console.log(this.doSelect)
        },

    }
}
</script>

<style lang="scss" scoped>
.container {
    height: 100%;
    width: 100%;
    background-color: #fff;
    padding: 15px 50px;
    padding: 8px;
    .result {
        .result-title {
            height: 32px;
            line-height: 32px;
            color: #000;
            background-color: rgba(214, 220, 224, 1);
            line-height: 32px;
            padding-left: 10px;
            display: flex;
            justify-content: space-between;

            .l,
            .r {
                line-height: 32px;

                img {
                    margin-top: 3px;
                    width: 26px;
                    height: 26px;
                    vertical-align: top;
                }
            }
            .r {
                font-size: 12px;
                padding-right: 20px;
            }
        }

        .result-table {
            padding: 10px 20px;
            border: 1px solid #dcdfe6;
        }
    }
    .title {
        height: 32px;
        color: #fff;
        background-color: rgb(127, 127, 127);
        line-height: 32px;
        padding-left: 10px;
    }

    .treebox {
        border: 1px solid #dcdfe6;
    }

    .btnC {
        text-align: right;
        margin-bottom: 10px;

        .mybtn {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            padding: 0;
        }
    }

    .el-select,
    .el-input,
    .el-date-editor {
        width: 100%;
    }

    .imgIcon {
        width: 30px;
        height: 30px;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .codeC {
        display: flex;
        justify-content: space-between;

        .tabs {
            width: 35px;

            .tabs-item {
                text-align: center;
                padding: 11px;
                height: 80px;
                background-color: rgba(22, 155, 213, 1);
                box-sizing: border-box;

                border-radius: 5px;
                -moz-box-shadow: none;
                -webkit-box-shadow: none;
                box-shadow: none;
                font-size: 14px;
                color: #ffffff;
                border-radius: 5px;
            }
        }
    }

    .vue-codemirror {
        width: calc(100% - 35px);
        border: 1px solid #dcdfe6;
    }
}
.searchMy {
    padding: 8px;
    .searchMy-form {
        height: 28px;
    }
}
.fileView {
    padding: 8px;
    width: 100%;
    // min-height: 50vh;
    // overflow: hidden;
}
::v-deep .textRedColor {
    color: rgb(217, 0, 27);
    font-weight: 700;
    // cursor: pointer;
}
::v-deep .textblueColor {
    color: rgb(112, 182, 3);
    font-weight: 700;
    // cursor: pointer;
}
::v-deep .stafftree > .el-tree-node > .el-tree-node__content .el-checkbox {
    display: none;
}
</style>